<template>
  <div class="app-container">
    <input type="text" autocomplete="off" v-model="activityId" placeholder="活动id">
    <button type="button" @click="fetchActivityOrders">
      <span>查询</span>
    </button>
    <button type="button" @click="research">
      <span>重置</span>
    </button>
    <el-table v-loading="listLoading" :data="activityOrders" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label="id" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="订单id">
        <template slot-scope="scope">
          {{ scope.row.orderId }}
        </template>
      </el-table-column>
      <el-table-column label="活动id" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.activityId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单履约开始" align="center">
        <template slot-scope="scope">
          {{ scope.row.deliveryStartTime }}
        </template>
      </el-table-column>
      <el-table-column label="订单履约结束" align="center">
        <template slot-scope="scope">
          {{ scope.row.deliveryEndTime }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getActivityOrders } from '@/api/activityOrder/activityOrder'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      dialogVisible: false,
      activityId: "",
      activityOrders:null
    }
  },
  created() {
    this.fetchActivityOrders()
  },
  methods: {
    fetchActivityOrders() {
      this.listLoading = true
      getActivityOrders({
        "activityId": this.activityId
      }).then(response => {
        console.log(response)
        this.activityOrders = response.data
        this.listLoading = false
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    research(){
      this.activityId = ""
      this.fetchActivityOrders()
    }

  }
}
</script>

<style></style>